<template>
  <div class="page">
    <!-- 顶部栏 -->
    <Base-Navbar title="首页"></Base-Navbar>

    <div class="container">
      <!-- 钱包信息 -->
      <div class="mb-10">
        <Base-Wallet-Info></Base-Wallet-Info>
      </div>

      <!-- 公告 -->
      <div class="mb-10">
        <van-notice-bar scrollable :text="notice"></van-notice-bar>
      </div>

      <!-- 搜索栏 -->
      <div class="mb-10">
        <van-search
          readonly
          placeholder="请输入你要搜索的商品"
          @click="router.push('/search/index')"
        ></van-search>
      </div>

      <!-- Tab -->
      <div class="mb-10">
        <Base-Tab
          @change="initPage"
          v-model:index="tabIndex"
          v-model:value="tabValue"
        ></Base-Tab>
      </div>

      <!-- 轮播图 -->
      <div class="radius radius--lg mb-10">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item
            style="height: 150px"
            v-for="(v, i) in swipers"
            :key="i"
          >
            <van-image
              style="width: 100%; height: 150px"
              :src="v.image"
            ></van-image>
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 产品列表 -->
      <div class="box opacity">
        <div class="title">热门产品</div>

        <ul class="list">
          <li class="item" v-for="(v, i) in products" :key="i">
            <product-item :v="v"></product-item>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from 'js/api'

import productItem from './components/product_item.vue'

const router = useRouter()
const tabIndex = ref(0)
const tabValue = ref('shopping')

const notice = ref('')
const swipers = ref([])
const products = ref([])

initPage()

function initPage() {
  getNotice()
  getSwiperList()
  getHotProductList()
}

// 获取公告
async function getNotice() {
  const { code, data } = await api.getNotice()

  if (code === 1) {
    notice.value = data.notice.map((v) => v.title).join('，')
  }
}

// 获取轮播图列表
async function getSwiperList() {
  const params = {
    mode: tabValue.value,
  }

  const { code, data } = await api.getSwiperList(params)

  if (code === 1) {
    swipers.value = data
  }
}

// 获取热门产品列表
async function getHotProductList() {
  const params = {
    delivery: tabValue.value,
  }

  const { code, data } = await api.getHotProductList(params)

  if (code === 1) {
    products.value = data.hots
  }
}
</script>

<style lang="scss" scoped>
:deep(.van-notice-bar) {
  border-radius: 100px;
  border: 1px solid #594214;
  background-color: #2b2111;

  .van-notice-bar__content {
    color: #b4b1ab;
  }
}
</style>
